<template>
  <ActionSheet v-model="show" class="filtertime">
    <!-- 这里原本的日期选择类型   type="year-month"    date是年月日  year-month是年月  month-day是月日 -->
    <DatetimePicker
      v-model="monthInt"
      type="month-day"
      title="选择年月日"
      :formatter="formatter"
      :swipe-duration="100"
    >
      <template #default>
        <div class="get-back flex items-center" @click="show = false">
          <img :src="ArrowLeftIcon" class="w-24px h-24px mr-6px" alt="" />
          返回筛选
        </div>
      </template>
      <template #columns-top>
        <div class="filtrate mb-32px">
          <div v-if="region" class="top flex items-center justify-between">
            <div class="name">大区（单选）</div>
          </div>
          <div v-if="region" class="content-tab">
            <div
              class="tab"
              :class="radioIndex == item.key ? 'activ' : null"
              v-for="item in FilterTimeList"
              :key="item.key"
              @click="radioFn(item)"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="name mb-12px">统计时间</div>
        </div>
      </template>
      <template #columns-bottom>
        <div class="footer-bottom">
          <button type="button" @click="_confirm" class="toolbar__confirm">
            确 定
          </button>
        </div>
      </template>
    </DatetimePicker>
  </ActionSheet>
</template>

<script>
import { ActionSheet, Toast, DatetimePicker } from "vant";
import bus from "@/config/evenrBus";
import DateIcon from "@/assets/icon/date.png";
import resetIcon from "@/assets/workbench/goout/reset.png";
import LlDatePicker from "./datePicker";
import ArrowLeftIcon from "@/assets/icon/arrow-left.png";
import { getYearMonth, getYear, getMonth } from "@/utils/index";

export default {
  components: {
    ActionSheet,
    LlDatePicker,
    DatetimePicker,
  },
  props: {
    FilterTimeList: {
      type: Array,
    },
    region: {
      type: Boolean,
      default: true,
    },
    storeVue: {
      type: Object,
    },
  },
  data() {
    return {
      show: false,
      radioIndex: null, //外出类型（单选）
      DateIcon,
      resetIcon,
      ArrowLeftIcon,
      monthInt: new Date(),
      LlDatePicker: 0,
    };
  },
  mounted() {
    if (!this.region) {
      bus.$on("work_singleLocationShowTime", (res) => {
        //单个站点
        this.show = res;
        if (res) {
          this.getSelectedDataActiv();
        }
      });
    } else {
      bus.$on("work_selectDataFilterShowTime", (res) => {
        //全部站点
        this.show = res;
        if (res) {
          this.getSelectedDataActiv();
        }
      });
    }
  },
  methods: {
    getSelectedDataActiv() {
      //回显示数据
      let list = this.$store.state.work[this.storeVue.name];
      if (list._statusRegion && list._statusRegion[0]) {
        this.radioIndex = list._statusRegion[0].key;
      } else {
        if (!this.region) return;
        this.radioIndex = this.FilterTimeList[0].key;
      }
    },
    // 单选选中
    radioFn(item) {
      this.radioIndex = item.key;
    },
    //确定且过滤数据
    _confirm() {
      if (!this.monthInt) {
        Toast("请选择日期");
        return false;
      }
      let RegionTime = this.monthInt
        ? [
            {
              key: "monthInt",
              selectIndex: getYearMonth(this.monthInt),
              name: getYear(this.monthInt) + "-" + getMonth(this.monthInt),
              value: getYearMonth(this.monthInt),
              show: true,
            },
          ]
        : [];

      if (this.region) {
        //全部站点传递数据
        let intervalTime = [
          {
            show: true,
            ...this.selectDataFilter(this.FilterTimeList, this.radioIndex)[0],
          },
        ];
        // 传递大区类型
        this.$store.commit(`work/${this.storeVue.commit}`, {
          key: "_statusRegion",
          value: intervalTime,
        });
      }
      //传递区间时间
      this.$store.commit(`work/${this.storeVue.commit}`, {
        key: "monthInt",
        value: RegionTime,
      });

      this.show = false;
      this.$emit("complete");
    },
    selectDataFilter(listData, listIndexs) {
      let filter = [];
      for (var i = 0; i < listData.length; i++) {
        if (listIndexs == listData[i].key) {
          filter.push(listData[i]);
        }
      }
      return filter;
    },
    formatter(type, val) {
      if (type === "year") {
        return val + "年";
      }
      if (type === "month") {
        return val + "月";
      }
      return val;
    },
  },
};
</script>

<style lang="scss" scoped>
@mixin minxi-fontstyle($size, $weight, $color) {
  font-size: $size;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: $weight;
  color: $color;
}
.filtertime {
  padding-top: 32px;
  .filtrate {
    padding: 0 16px;
    .name {
      height: 20px;
      line-height: 20px;
      @include minxi-fontstyle(14px, 500, #333333);
      font-family: PingFangSC-Medium, PingFang SC;
    }
    .content-tab {
      margin-top: 16px;
      display: flex;
      flex-wrap: wrap;
      .tab {
        width: 104px;
        height: 32px;
        background: #f5f5f5;
        border-radius: 16px;
        @include minxi-fontstyle(12px, 400, #333333);
        line-height: 32px;
        text-align: center;
        margin-right: 6px;
        border: 1px solid #f5f5f5;
        margin-bottom: 12px;
      }
      .tab:nth-child(3n) {
        margin-right: 0;
      }
      .activ {
        background: rgba(29, 111, 233, 0.1);
        border-radius: 16px;
        border: 1px solid #1d6fe9;
        color: #1d6fe9;
        font-weight: 600 !important;
      }
    }

    .radio-time {
      .content-tab {
        .tab {
          width: 80px;
          height: 32px;
        }
        .tab:nth-child(3) {
          margin-right: 6px;
        }
        .tab:nth-child(4) {
          margin-right: 0;
        }
      }
    }
  }
  .van-picker__toolbar {
    .get-back {
      padding-left: 8px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      margin-bottom: 24px;
    }
  }
  ::v-deep.van-picker__columns {
    padding-left: 16px;
    padding-right: 12px;
  }
  .footer-bottom {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 20px;
    .toolbar__confirm {
      margin: 0 auto;
      width: 343px;
      height: 44px;
      background: #1d6fe9;
      border-radius: 10px;
      @include minxi-fontstyle(14px, 500, #fff);
    }
  }
}
</style>
